<template>
        <div class="card mb-3" style="line-height: 1.2">
          <div class="card-header d-flex align-items-center">
              规格项 
              <el-input class="ml-2" size="mini" style="width:200px" :value="item.name"
              @input="vModel('name', index, $event)">
                  <el-button slot="append" icon="el-icon-more" @click="chooseSkus"></el-button>
              </el-input>
              <el-radio-group :value='item.type' class="ml-2" style="margin-bottom: -10px"
              @input="vModel('type', index, $event)">
                  <el-radio :label="0">无</el-radio>
                  <el-radio :label="1">颜色</el-radio>
                  <el-radio :label="2">图片</el-radio>
              </el-radio-group>
              <el-button-group class="ml-auto">
                  <!-- 上移 -->
                  <el-button class="mx-1" icon="el-icon-top" size="mini" 
                  @click="sortCard('moveUp', index)" :disabled = 'index === 0'></el-button>
                  <!-- 下移 -->
                  <el-button icon="el-icon-bottom" size="mini"
                  @click="sortCard('moveDown', index)" :disabled = 'index === total - 1'></el-button>
                  <el-button class="mx-1" type="text" size="mini" @click="delSkuCard(index)">删除</el-button>
              </el-button-group>
          </div>
          <div class="card-body">
              <!-- 规格属性列表 -->
              <div class="d-flex align-items-center flex-wrap">
                <!-- 遍历item.list 如果遍历list 第一次赋值后如果改变了这里不会跟着改变 -->
                <SkuCardChildren v-for="(item2, index2) in item.list" :key="index2" 
                :type="item.type" :item='item2' :cardIndex='index' :index='index2'
                v-dragging="{ item: item2, list: list, group: `skuItem${index}` }"
                ></SkuCardChildren>
              </div>
              <el-button icon="el-icon-plus" type="text" @click="addSkuValue(index)">增加规格值</el-button>
          </div>
        </div>
</template>
<script>
import {mapMutations} from 'vuex';
import SkuCardChildren from '@/components/shop/create/sku/sku-card-children.vue'
export default {
   data() {
      return {
        // 规格属性列表
        list: this.item.list
      }
   },
   components: {
     SkuCardChildren
   },
   props: {
     item: Object,
     index: Number,
     total: Number
   },
   created(){
   },
   mounted () {
    //  可以在这里监听item.list的变化 也可以直接遍历item.list
    //  this.$watch('item.list', (newValue, oldValue) => {
    //    this.list = newValue
    //  })
    
      //  监听拖曳过程
      // this.$dragging.$on('dragged', ({ value }) => {
      //   console.log(value.item)
      //   console.log(value.list)
      // })
      // 监听拖曳结束
      this.$dragging.$on('dragend', (e) => {
        if (e.group === 'skuItem' + this.index) {
          this.sortSkuValue({
          index: this.index,
          value: this.list
          })
        }
      })
    },
   computed:{
   },
   watch:{
   },
   inject: ['app'],
   methods:{
    // 调用mapMutations中定义的方法
    ...mapMutations(['delSkuCard', 'vModelSkuCard', 'sortSkuCard', 'addSkuValue', 'sortSkuValue']),
    vModel(key, index, value) {
      this.vModelSkuCard({key, index, value})
    },
    // 规格卡片排序
    sortCard(action, index) {
      this.sortSkuCard({action, index})
    },
    // 选择规格弹窗
    chooseSkus() {
      this.app.chooseSkus((res) => {
        this.vModel('name', this.index, res.name)
        this.vModel('type', this.index, res.type)
        this.vModel('list', this.index, res.list)
        this.list = res.list
      })
    }
   },
}
</script>
<style lang="less" scoped>

</style>
